<template>
  <div :class="classes || ''" class="bg-white-6 column no-wrap shadow-1 border-8 q-pa-md">
    <div class="row items-center q-gutter-md">
      <div class="text-subtitle1 text-bold">{{ '设备分布统计' }}</div>
      <q-space></q-space>
      <q-btn v-for="tab in tabs" :key="tab.value" :class="currentTab === tab.value ? 'bg-indigo-14' : 'bg-grey-1'"
             :color="currentTab === tab.value ? 'indigo-14' : 'grey-4'" no-caps outline unelevated
             @click="handleToggle(tab.value)">
        <div :class="currentTab === tab.value ? 'text-grey-1' : 'text-grey-8'" class="row items-center no-wrap">
          <span class="text-bold text-uppercase">{{ tab.label }}</span>
        </div>
      </q-btn>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <q-charts :loading='loading' :option="option" classes="col no-shadow no-padding"></q-charts>
  </div>
</template>

<script setup>
import { i18n } from 'boot/i18n.js'
import { getAPI } from 'src/api'
import { computed, onMounted, ref } from 'vue'
import { adaptFontSize } from 'src/utils/utils'

defineProps({ classes: String })

const cols = ref([])
const maxNum = ref(0)
const listData = ref({})
const chartData = ref([])
const loading = ref(false)
const currentTab = ref('runningAgvNumList')
const rows = new Array(6).fill({}).map((_, index) => `${index + 1}0`)
const tabs = computed(() => {
  return [{
    label: `${i18n.t('AGVCore.AGVStatusTip4')}`, value: 'runningAgvNumList'
  }, {
    label: `${i18n.t('AGVCore.AGVStatusTip2')}`, value: 'freeAgvNumList'
  }, {
    label: `${i18n.t('AGVCore.AGVStatusTip6')}`, value: 'otherAgvNumList'
  }, {
    label: `${i18n.t('AGVCore.AGVStatusTip1')}`, value: 'chargeAgvNumList'
  }]
})
const option = computed(() => {
  const size10 = adaptFontSize(10)
  return {
    grid: { top: 0, right: 0, left: size10 * 3, bottom: size10 * 2 },
    tooltip: { position: 'top', formatter: e => `${e.marker} ${formatLabel(e)}： ${e.value[2]}` },
    yAxis: { type: 'category', data: rows, axisTick: { show: false }, axisLine: { show: false } },
    xAxis: { type: 'category', data: cols.value, axisTick: { show: false }, axisLine: { show: false } },
    visualMap: { show: false, min: 0, max: maxNum.value * 1.5, inRange: { color: ['#FAFAFA', '#333FFF'] } },
    series: [{ type: 'heatmap', data: chartData.value, label: { show: true } }]
  }
})

const formatLabel = e => {
  const { name = '', value = [] } = e, prefix = `${name.replace('00', value[1] + '0')}`
  if (value[1] === 5) return `${prefix} - ${cols.value[value[0] + 1]}`
  return `${prefix} - ${name.replace('00', value[1] + 1 + '0')}`
}
const initData = () => {
  loading.value = true
  getAPI('/tpm/yfagv/api/taskStatusMonitor/agvDistribution', {}, res => {
    listData.value = res || {}
    handleToggle(currentTab.value)
    loading.value = false
  }, () => (loading.value = false))
}
const handleToggle = val => {
  cols.value = []
  maxNum.value = 0
  currentTab.value = val
  chartData.value = listData.value[val].map((el, index) => {
    maxNum.value = Math.max(maxNum.value, el.amount)
    if (index % rows.length === 0) cols.value.push(el.createdTime.slice(11, 16))
    return [Math.floor(index / rows.length), index % rows.length, el.amount]
  })
}
onMounted(initData)
</script>